<template>
    <div class="prepare">
        <allHead>
            <template v-slot:left>教学资源</template>
        </allHead>
        <div class="content">
            <div class="serch">
                <van-search v-model="value" shape="round" background="#FAFAFA" placeholder="搜索教案、课件、练习题" />
            </div>
            <div class="allFile">
                <span>全部文件</span>
                <div class="item" v-for="item in 4">
                    <van-cell center title="高三物理第一单元题库" label="2024.12.6" icon="location-o" is-link />
                </div>
            </div>
        </div>
        <div class="add" v-draggable>+</div>
    </div>

</template>

<script setup>
import allHead from "@/components/allHead.vue"
</script>


<style lang="less" scoped>
.prepare {
    background-color: #FAFAFA;
    height: 100vh-6px;
    position: relative;

    .serch {
        .van-search {
            --van-search-content-background-color: #ffffff;
        }
    }

    .allFile {
        margin-top: 10px;

        span {
            font-size: 16px;
            font-weight: 600;
            padding-left: 17px;
        }

        .item {
            margin-top: 10px;
        }
    }

    .add {
        position: absolute;
        /* 改为absolute以便可以拖拽 */
        top: 85%;
        left: 86%;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background-color: #2563EB;
        color: #fff;
        text-align: center;
        line-height: 50px;
        font-size: 24px;
        cursor: pointer;
    }
}
</style>